<template>
	<div>
		<!-- 顶部轮播图 -->
		<mt-swipe :auto="4000">
			<!-- 在组件中使用v-for循环一定要使用key -->
  			<mt-swipe-item v-for='item in swiperList' :key='item.id'>
  				<img :src="item.img" alt="">
  			</mt-swipe-item>
		</mt-swipe>
		<!-- 九宫格 -->
		<ul class="mui-table-view mui-grid-view mui-grid-9">
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    	<router-link to="/home/newsList">
		            <img :src='news' />
		            <div class="mui-media-body">新闻资讯</div>
		        </router-link>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    	<router-link to="/home/newsList">
		            <img :src='mms' />
		            <div class="mui-media-body">图片分享</div>
		        </router-link>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    	<router-link to="/home/newsList">
		            <img :src='shop' />
		            <div class="mui-media-body">商品购买</div>
		        </router-link>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    	<router-link to="/home/newsList">
		            <img :src='survey' />
		            <div class="mui-media-body">留言反馈</div>
		        </router-link>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    	<router-link to="/home/newsList">
		            <img :src='ins' />
		            <div class="mui-media-body">视频专区</div>
		        </router-link>
		    </li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    	<router-link to="/home/newsList">
		            <img :src='assistant' />
		            <div class="mui-media-body">联系我们</div>
		        </router-link>
		    </li>
		</ul>
	</div>
</template>
<script>
import {Toast} from 'mint-ui'
import news from '../../images/news.png'
import mms from '../../images/mms.png'
import shop from '../../images/shop.png'
import survey from '../../images/survey.png'
import ins from '../../images/ins.png'
import assistant from '../../images/assistant.png'

export default{
	data(){
		return{
			swiperList:[],
			news,
			mms,
			shop,
			survey,
			ins,
			assistant
		}
	},
	created(){
		this.getSwiper()
		console.log(this.news)
	},
	methods:{
		getSwiper(){
			this.axios.get('api/getlunbo').then(res=>{
				console.log(res)
				if (res.data.status === 0) {
					this.swiperList = res.data.message
				}else{
					console.log('请求失败')
					Toast('请求失败')
				}
			})
		}
	}
}
</script>
<style lang="less" scoped>
.mint-swipe{
	height: 200px;
	.mint-swipe-item{
		&:nth-child(1){ //&：交集选择器
			background-color: red;
		}
		&:nth-child(2){
			background-color: blue;
		}
		&:nth-child(3){
			background-color: green;
		}
		img{
			width: 100%;
			height: 200px;
		}
	}
}
.mui-table-view{
	background-color:#fff;
	border: none;
	.mui-table-view-cell{
		border: none;
		img{
			width: 60px;
		}
	}
}

</style>